<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isELIgnored="false" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<link href="static/plugin/kangarooImgupload/css/imgupload.css" rel="stylesheet"/>
<script src="static/plugin/kangarooImgupload/js/imgupload.js"></script>

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title">基本信息</h4>
</div>
<div class="modal-body">
    <form id="form_data" class="form-horizontal row">
        <div id="div_error" class="col-sm-12"></div>
        <input type="hidden" name="id" id="id" value="${data.id}">

        <div class="form-group col-sm-6">
            <label class="control-label col-sm-4">姓　　名：</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" name="name" value="${data.name}">
            </div>
        </div>
        <div class="form-group col-sm-6">
            <label class="control-label col-sm-4">身份证号：</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" name="idCard" value="${data.idCard}">
            </div>
        </div>
        <div class="form-group col-sm-6">
            <label class="control-label col-sm-4">手机号码：</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" name="phone" value="${data.phone}">
            </div>
        </div>
        <c:if test="${data.id!=null}">
            <div class="form-group col-sm-6">
                <label class="col-sm-4 control-label">出生日期：</label>
                <div class="col-sm-6">
                    <div class="input-group date form_date timeInput">
                                                <span class="input-group-addon"><span
                                                        class="glyphicon glyphicon-calendar"></span></span>
                        <input class="form-control" type="text" name="birthday"
                               value="<fmt:formatDate value="${data.birthday}" pattern="yyyy-MM-dd"/>" readonly>
                    </div>
                </div>
            </div>

            <div class="form-group col-sm-6">
                <label class="col-sm-4 control-label">性　　别：</label>
                <div class="col-sm-6">
                    <select class="form-control" name="sex" id="sex">
                        <option value="">&nbsp</option>
                    </select>
                </div>
            </div>


            <div class="form-group col-sm-6">
                <label class="control-label col-sm-4">电子邮箱：</label>
                <div class="col-sm-6">
                    <input type="text" class="form-control" name="email" value="${data.email}">
                </div>
            </div>

            <div class="form-group col-sm-6">
                <label class="control-label col-sm-4">银行卡号：</label>
                <div class="col-sm-6">
                    <input type="text" class="form-control" name="bankCard" value="${data.bankCard}">
                </div>
            </div>

            <div class="form-group col-sm-6">
                <label class="control-label col-sm-4">开&nbsp;&nbsp;户&nbsp;&nbsp;行：</label>
                <div class="col-sm-6">
                    <input type="text" class="form-control" name="bankName" value="${data.bankName}">
                </div>
            </div>

            <div class="form-group col-sm-6">
                <label class="col-sm-4 control-label">状　　态：</label>
                <div class="col-sm-6">
                    <select class="form-control" name="retire" id="retire">
                        <option value="">&nbsp</option>
                    </select>
                </div>
            </div>

            <div class="form-group col-sm-6">
                <label class="col-sm-4 control-label">是否教师：</label>
                <div class="col-sm-6">
                    <select class="form-control" name="teacher" id="teacher">
                        <option value="">&nbsp</option>
                    </select>
                </div>
            </div>


            <div class="form-group col-sm-6">
                <label class="col-sm-4 control-label">是否外省：</label>
                <div class="col-sm-6">
                    <select class="form-control" name="outLander" id="outLander">
                        <option value="">&nbsp</option>
                    </select>
                </div>
            </div>

            <div class="form-group col-sm-6">
                <label class="col-sm-4 control-label">最高学历：</label>
                <div class="col-sm-6">
                    <select class="form-control" name="education" id="education">
                        <option value="">&nbsp</option>
                    </select>
                </div>
            </div>

            <div class="form-group col-sm-6">
                <label class="col-sm-4 control-label">职　　称：</label>
                <div class="col-sm-6">
                    <select class="form-control" name="rank" id="rank">
                        <option value="">&nbsp</option>
                    </select>
                </div>
            </div>

            <div class="form-group col-sm-6">
                <label class="col-sm-4 control-label">是否启用：</label>
                <div class="col-sm-6">
                    <select class="form-control" name="live" id="live">
                        <option value="">&nbsp</option>
                    </select>
                </div>
            </div>

            <div class="form-group col-sm-6">
                <label class="control-label col-sm-4">照　　片：</label>
                <div class="col-sm-6" id="div_imgBox">
                    <input type="file" class="fade" id="file" accept="image/*"
                           <c:if test="${data.headImg!=null}">data-src="downloadFileByPath?pathName=${data.headImg}"</c:if> >
                </div>
            </div>
        </c:if>
        <div class="form-group col-sm-6">
            <div class="col-sm-6 col-sm-offset-4">
                <button type="submit" class="btn btn-default btn-success "><span
                        class="glyphicon glyphicon-ok"></span>&nbsp;确&nbsp;定&nbsp;
                </button>
            </div>
        </div>

    </form>
</div>


<script>

    $.sysPlugin.initSelect2($("#sex"), {
        data: $.sysPlugin.enumeration.sex,
        value: '${data.sex}'
    });
    $.sysPlugin.initSelect2($("#rank"), {
        data: $.sysPlugin.enumeration.rank,
        value: '${data.rank}'
    });
    $.sysPlugin.initSelect2($("#education"), {
        data: $.sysPlugin.enumeration.education,
        value: '${data.education}'
    });
    $.sysPlugin.initSelect2($("#retire"), {
        data: $.sysPlugin.enumeration.retire,
        value: '${data.retire}'
    });
    $.sysPlugin.initSelect2($("#teacher"), {
        data: $.sysPlugin.enumeration.boole,
        value: '${data.teacher}'
    });
    $.sysPlugin.initSelect2($("#outLander"), {
        data: $.sysPlugin.enumeration.outLander,
        value: '${data.outLander}'
    });

    $.sysPlugin.initSelect2($("#live"), {
        data: $.sysPlugin.enumeration.live,
        value: '${data.live}'
    });


    var imgObj = $('#file').imgupload({
        route: 'imgBase64upLoad/saveHeadImg',
    });
    <%--bootstrapValidator--%>
    var $form = $("#form_data");
    $form.bootstrapValidator({
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            name: {
                validators: {
                    stringLength: {
                        max: 40,
                        message: '不能超过40个字符！'
                    },
                    notEmpty: {
                        message: '不能为空！'
                    }
                }
            }, idCard: {
                validators: {
                    regexp: {
                        regexp: /^[0-9]*(X)?$/,
                        message: '出现非法字符！'
                    },
                    stringLength: {
                        max: 18,
                        min: 18,
                        message: '身份证号长度应该为18位！'
                    },
                    notEmpty: {
                        message: '不能为空！'
                    }
                }
            }, birthday: {
                validators: {
                    notEmpty: {
                        message: '不能为空！'
                    }
                }
            }, sex: {
                validators: {
                    notEmpty: {
                        message: '不能为空！'
                    }
                }
            }, phone: {
                validators: {
                    digits: {
                        message: '出现非法字符！'
                    }, stringLength: {
                        max: 11,
                        min: 11,
                        message: '长度应该为11位！'
                    },
                    notEmpty: {
                        message: '不能为空！'
                    }
                }
            }, email: {
                validators: {
                    emailAddress: {
                        message: '格式不正确！'
                    },
                    notEmpty: {
                        message: '不能为空！'
                    }
                }
            }, bankCard: {
                validators: {
                    stringLength: {
                        max: 22,
                        min: 15,
                        message: '字符长度应该为15-22位！'
                    },
                    notEmpty: {
                        message: '不能为空！'
                    }
                }
            }, bankName: {
                validators: {
                    notEmpty: {
                        message: '不能为空！'
                    }
                }
            }, retire: {
                validators: {
                    notEmpty: {
                        message: '不能为空！'
                    }
                }
            }, teacher: {
                validators: {
                    notEmpty: {
                        message: '不能为空！'
                    }
                }
            }, outLander: {
                validators: {
                    notEmpty: {
                        message: '不能为空！'
                    }
                }
            }, live: {
                validators: {
                    notEmpty: {
                        message: '不能为空！'
                    }
                }
            }, education: {
                validators: {
                    notEmpty: {
                        message: '不能为空！'
                    }
                }
            }, rank: {
                validators: {
                    notEmpty: {
                        message: '不能为空！'
                    }
                }
            }
        }
    }).on('success.form.bv', function (e) {
        e.preventDefault();
        var src = $("#div_imgBox img").attr("src");
        if (src) {
            var i = src.indexOf("pathName=");
            if (i > -1) {
                src = src.substr(i + 9);
            }
        }


        var data = $(e.target).serializeObject();
        data.headImg = src;


        $.sysPlugin.superAjax({
            data: data,
            url: '${url}',
            operateType: '${operateType}',
            showSuccessAlert: true,
            showWarnAlert: false,

            successCall: function (data) {
                $.sysPlugin.successCallBack(data, {
                    modal: $("#modal_ajax"),
                });
                <c:choose>
                <c:when test="${operateType=='update'}">
                refreshTab($("#tab_expertBase"));
                </c:when>
                <c:otherwise>
                $("#table_data").bootstrapTable('refresh');
                </c:otherwise>
                </c:choose>
            },


            errorCall: function (data) {
                $.sysPlugin.errorCallBack(data, {
                    errorAddress: $("#div_error"),
                    form: $form
                })
            }
        });
    });

    $.sysPlugin.initDateTimeInput();

</script>
